---
title: 'Litos: Photos Page Config'
description: 'Configure Photos page: page texts (PHOTOS_CONFIG), file locations, and usage examples.'
pubDate: 2025-08-10
author: 'Dnzzk2'
cover: assets/cover.png
recommend: true
tags: ['Litos', 'Documentation']
---

The Photos page displays moments in a timeline with a polaroid-style gallery. This document explains how to configure page texts and how to add photo timelines.

The following files are compatible with this document:

- `src/pages/photos/index.astro` - photos page.
- `src/components/photos` - timeline and polaroid gallery components.
- `src/config.ts` - page config (`PHOTOS_CONFIG`) and `PhotosList` data.
- `src/types.ts` - Type definitions for `PhotosConfig`, `PhotoData`, and `Photo`.

### Photos Page Config

Configure page texts in `src/config.ts`:

```ts title="config.ts"
export const PHOTOS_CONFIG: PhotosConfig = {
  title: 'Photos',
  description: 'Here I will record some photos taken in daily life.',
  introduce: 'Here I will record some photos taken in daily life.',
}
```

| Property    | Description                              |
| ----------- | ---------------------------------------- |
| title       | Title shown on the page and browser tab. |
| description | The metadata description in the head.    |
| introduce   | Intro text displayed under the title.    |

### Data Source: PhotosList

The page reads data from `PhotosList` in `src/config.ts`. Each item in the array represents one timeline entry (a day, a trip, an album, etc.).

```ts title="config.ts"
export const PhotosList: PhotoData[] = [
  {
    title: "Friend's Adorable Cat",
    icon: { type: 'emoji', value: '🌠' },
    description: 'So kawaii (*^ω^*)',
    date: '2025-06-21',
    travel: '',
    photos: [
      { src: '/photos/cat1.webp', alt: "Friend's Adorable Cat", width: 1080, height: 810, variant: '4x3' },
      { src: '/photos/cat2.webp', alt: "Friend's Adorable Cat", width: 1080, height: 810, variant: '4x3' },
      { src: '/photos/cat3.webp', alt: "Friend's Adorable Cat", width: 1080, height: 810, variant: '4x3' },
    ],
  },
]
```

#### PhotoData fields

| Property    | Description                                                                            |
| ----------- | -------------------------------------------------------------------------------------- |
| title       | Title of the timeline item.                                                            |
| icon        | Icon displayed on the left timeline axis. See the table below for supported formats.   |
| description | Optional text shown below the title.                                                   |
| date        | Display date string (free format).                                                     |
| travel      | Optional additional label for travel/route info.                                       |
| photos      | Array of `Photo` objects rendered as a polaroid stack and openable in a modal gallery. |

##### Icon object

`TimelineIconType` supports: `emoji` | `icon` | `color` | `number` | `image`

| Property | Description                                                                |
| -------- | -------------------------------------------------------------------------- |
| type     | One of the supported types above.                                          |
| value    | Emoji (e.g. '🌅'), icon name, color class, number text, or image URL/path. |
| fallback | Optional fallback text when icon cannot be shown.                          |

#### Photo fields

| Property    | Description                                                        |
| ----------- | ------------------------------------------------------------------ |
| src         | Image path (recommend using files under `/public/photos`).         |
| alt         | Image alt text.                                                    |
| width       | Image intrinsic width.                                             |
| height      | Image intrinsic height.                                            |
| variant     | Polaroid layout variant: `1x1`、`4x5` 、`4x3``9x16`.               |
| location    | Optional. Shooting location.                                       |
| date        | Optional. Photo shooting date.                                     |
| camera      | Optional. Shooting device.                                         |
| description | Optional. Additional caption for the single image (used in modal). |

> [!TIP]
> Variants control the polaroid aspect: `1x1` (square), `4x5` (classic polaroid), `4x3` (landscape), `9x16` (portrait).

### How it renders

- Timeline and icons are rendered by `src/components/photos/PhotoTimeline.astro`.
- Polaroid stack and modal gallery are handled by `PolaroidStack` / `PhotoGalleryModal`.
- Clicking any photo opens a modal gallery. Hovering reveals a subtle spread animation.

### Recommended practices

- Optimize images (WebP/AVIF) and provide correct `width`/`height` to avoid layout shift.
- Keep 3–6 photos per timeline item for a balanced stack effect.
- Prefer consistent variants within one item for a neat layout.
